<!doctype html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>case2 mbg + border, nojs</title>
<style>
@import url(../../README.css);
html {
  color: whitesmoke; background-color: #222;
  margin: 0.5em 2em; line-height: 1.5;
}
.view { padding: 20px; }
.bg {
  -webkit-box-shadow: white 1px 1px 20px;
/*
  background: url(../../img/grid1.gif) repeat-y 32px 0,
              url(../../img/grid1.gif) repeat-y 96px 0,
              url(../../img/grid1.gif) repeat-y 160px 0,
              url(../../img/grad2.png) repeat-x left top,
              url(../../img/grad1.png) skyblue repeat-x left bottom;
 */
  background: url(../../img/grad1.png) skyblue repeat-x left bottom;

}
.radius {
  -webkit-border-radius: 40px;
}
.border {
  border: 10px solid black;
}
.onepxborder {
  border: 1px solid black;
}
.noborder {
  border: 0px solid black;
}


</style>
<script>
window.UUMETA_DEBUG = 1;
window.UUMETA_IMAGE_DIR = "../../img";
</script>
</head><body>

<h3>border: 10px solid black; -uu-border-radius: 40px</h3>
  <p>-uu-border-radius: 40px が指定されているため、ボーダー境界でクリッピングを行いません。</p>
  <div class="view">
    <div class="bg border radius">
      <pre>
        <img class="alpha" src="../../img/s32.png" />
      </pre>
    </div>
  </div>
  <div class="view">
    <div class="bg onepxborder radius">
      <pre>
        <img class="alpha" src="../../img/s32.png" />
      </pre>
    </div>
  </div>

  <div class="view">
    <div class="bg noborder radius">
      <pre>
        <img class="alpha" src="../../img/s32.png" />
      </pre>
    </div>
  </div>

</body></html>
